<template>
	<view class="wrap">
		<view class="top"  :style="{backgroundImage:`url(${$IMG_URL}/assets/index-bg.png)`}">
			<view class="status-bar"></view>
			<view class="top-in">
				<view class="logo">
					<image class="logo-img" src="/static/images/indexnew/Frame 1@2x.png" mode=""></image>
				</view>
				<view class="" @click="go('/pages/public/search')">
					<u-search placeholder="输入商品/店铺名称" :show-action="false" height="68" color="#ffffff"
						placeholder-color="#ffffff" :input-style="{background:'none',fontSize:'26rpx'}"
						bg-color="rgba(255,255,255,.3)" v-model="keyword"></u-search>
				</view>
				<view class="swiper" v-if="homeTemplate&&homeTemplate[0]">
						<u-swiper class="margin-top-24" height="366" border-radius="16" :list="homeTemplate&&homeTemplate[0].content.list"></u-swiper>
				</view>
			</view>
		</view>
		<view class="tab s-flex-r-s-s s-flex-wrap">
			<view class="tab-item s-flex-c-s-c" @click="go(item.path)" v-for="(item,index) in tab" :key="index">
				<image class="img" :src="item.image" mode=""></image>
				<text class="name">{{item.title}}</text>
			</view>
		</view>
		<view class="content">
			<image class="gg" @click="go('/pages/index/memberCard/memberCard')" :src="`${$IMG_URL}/assets/indexnew/gg.png`" mode=""></image>
			<view class="title-box s-flex-r-b-c">
				<view class="title" :style="{backgroundImage:`url(${$IMG_URL}/assets/index-tit-bg.png)`}">
					限时好物
				</view>
				<view class="more s-flex-r-s-c" @click="go('/pages/activity/seckill/list')">
					<text class="text">查看更多</text>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
			</view>
			<view class="list s-flex-r-b-s s-flex-wrap">
				<view @click="go(`/pages/goods/detail?id=${item.id}`)" class="item" v-for="(item,index) in list" :key="index">
					<view class="img-box s-flex-c-c-c">
						<image class="img" :src="item.image" mode=""></image>
					</view>
					<view class="tit">
						{{item.title}}
					</view>
					<view class="sub">
						{{item.subtitle}}
					</view>
					<view class="price-box s-flex-r-b-c">
						<view class="price">
							{{item.price}}
						</view>
						<image class="car" src="/static/images/indexnew/Group 2444@2x.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				keyword: '',
				list: [],
				tab: [
					{
						image: '/static/images/indexnew/Group 2503@2x.png',
						title: '商品区',
						path:"/pages/goods/list"
					},
					{
						image: '/static/images/indexnew/Group 2502@2x.png',
						title: '复购区',
						path:"/pages/app/commission/goods"
					},
					{
						image: '/static/images/indexnew/Group 2501@2x.png',
						title: '折扣区',
						path:"/pages/activity/groupon/list"
					},
					{
						image: '/static/images/indexnew/Group 2500@2x.png',
						title: '特价区',
						path:"/pages/activity/discounts/list"
					},
					{
						image: '/static/images/indexnew/Group 2504@2x.png',
						title: '秒杀区',
						path:"/pages/activity/seckill/list"
					},
					{
						image: '/static/images/indexnew/Group 2505@2x.png',
						title: '积分区',
						path:"/pages/app/score/list"
					},
					{
						image: '/static/images/indexnew/Group 2505@2x.png',
						title: '排行榜', 
						path:"/pages/index/incomeRank/incomeRank"
					},
					{
						image: '/static/images/indexnew/Group 2505@2x.png',
						title: '素材',
						path:"/pages/index/sourceMaterial/sourceMaterial"
					},
					{
						image: '/static/images/indexnew/Group 2505@2x.png',
						title: '平台补贴',
						path:"/pages/index/platformIncome/platformIncome"
					},
					{
						image: '/static/images/indexnew/Group 2505@2x.png',
						title: '我的团队',
						path:"/pages/user/myTeam/myTeam"
					},
				],
			}
		},
		onLoad() {
			this.getList()
		},
		computed: {
			...mapGetters(['homeTemplate']),
		},
		methods:{
			getList(){
				this.$http('goods.lists', {}).then(res => {
					this.list = res.data.data
					console.log('this.list: ', this.list)
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.s-flex-wrap{
		  flex-wrap: wrap;
	  }
	  .s-flex-r-s-s {
	    display: flex;
	  }
	  .s-flex-r-s-c {
	    display: flex;
	    align-items: center;
	  }
	  .s-flex-r-e-c {
	    display: flex;
	    justify-content: flex-end;
	    align-items: center;
	  }
	
	  .s-flex-r-c-c {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	
	  .s-flex-r-b-c {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	  }
	  .s-flex-r-b-s {
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-start;
	  }
	  .s-flex-r-b-e {
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-end;
	  }
	
	  .s-flex-c-s-s {
	    display: flex;
	    flex-direction: column;
	  }
	
	  .s-flex-c-s-c {
	    display: flex;
	    flex-direction: column;
	    justify-content: flex-start;
	    align-items: center;
	  }
	
	  .s-flex-c-b-s {
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    align-items: flex-start;
	  }
	
	  .s-flex-c-c-c {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	  }
	  .s-flex-c-s-e {
	    display: flex;
	    flex-direction: column;
	    justify-content: flex-start;
	    align-items: flex-end;
	  }
	  .s-flex-c-e-c {
	    display: flex;
	    flex-direction: column;
	    justify-content: flex-end;
	    align-items: center;
	  }
	  .flex1{
		  flex: 1;
	  }
	
	/deep/ .u-placeholder-class{
		color:#ffffff;
	}
	.wrap{
		background: #FFFFFF;
		padding-bottom: 100rpx;
	}
	.top {
		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		
		width: 750rpx;
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.top-in {
			padding: 16rpx 32rpx 0;

			.logo {
				margin-bottom: 14rpx;

				.logo-img {
					width: 68rpx;
					height: 68rpx;
				}
			}
			.swiper{
				margin-top: 24rpx;
				height: 366rpx;
			}
		}
	}
	.tab{
		margin-top: 32rpx;
		.tab-item{
			width: 176rpx;
			margin-right: 14rpx;
			&:nth-child(4n){
				margin-right: 0 !important;
			}
			margin-bottom: 24rpx;
			overflow: hidden;
			.img{
				width: 112rpx;
				height: 112rpx;
				margin-bottom: 8rpx;
			}
			.name{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 33rpx;
			}
		}
	}
	.content{
		padding: 0 32rpx;
		.gg{
			width: 686rpx;
			height: 156rpx;
		}
		.title-box{
			margin-top: 20rpx;
			height: 98rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #333333;
			line-height: 47rpx;
			text-align: left;
			.title{
				background-position: 0 34rpx;
				background-repeat: no-repeat;
				background-size: 160rpx 12rpx;
			}
		}
		.more{
			.text{
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 33rpx;
			}
		}
		.list{
			padding: 20rpx 0;
			.item{
				width: 328rpx;
				margin-bottom: 40rpx;
				.img-box{
					width: 328rpx;
					height: 328rpx;
					background: #F4F4F4;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-bottom: 20rpx;
					.img{
						width: 280rpx;
						height: 280rpx;
					}
				}
				.tit{
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 44rpx;
				}
				.sub{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 44rpx;
					margin-bottom: 6rpx;
				}
				.price-box{
					.price{
						font-size: 36rpx;
						color: #EB5C20;
						line-height: 44rpx;
						text-align: left;
					}
					.car{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
	}
</style>